<template>
  <div class="container">
    <div>
      <div class="menu-navbar">
        <el-button size="small" type="" @click="cancelSubmit">取消</el-button>
        <el-button size="small" type="success" @click="createSubmit('appendlist')">更新</el-button>
      </div>
      <div>
        <el-form :model="appendlist" label-position="top" size="small" ref="appendlist" :rules="appendrules" label-width="110px">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="机构名称" prop="name">
                <el-input v-model="appendlist.name" placeholder="机构名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="机构英文名称" prop="nameEn">
                <el-input v-model="appendlist.nameEn" placeholder="机构英文名称"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="机构简称" prop="shortName">
                <el-input v-model="appendlist.shortName" placeholder="机构简称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="机构代码" prop="code">
                <el-input v-model="appendlist.code" placeholder="机构代码"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="机构类别" prop="category">
                <el-select v-model="appendlist.category" clearable placeholder="机构类别" @change="selectChanged">
                  <el-option
                    v-for="item in classifyOptions"
                    :key="item.codeKey"
                    :label="item.codeName"
                    :value="item.codeKey">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="组织机构类别" prop="unitId">
                <el-select v-model="appendlist.unitId" clearable placeholder="组织机构类别">
                  <el-option
                    v-for="item in unitIdOptions"
                    :key="item.type"
                    :label="item.value"
                    :value="item.type">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="机构状态" prop="status">
                <el-select v-model="appendlist.status" clearable placeholder="机构状态">
                  <el-option
                    v-for="item in typeOptions"
                    :key="item.type"
                    :label="item.value"
                    :value="item.type">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="排序号" prop="orderNo">
                <el-input v-model="appendlist.orderNo" placeholder="排序号"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="是否是临时" prop="isTemp">
                <el-select v-model="appendlist.isTemp" clearable placeholder="是否是临时">
                  <el-option
                    v-for="item in isTempOptions"
                    :key="item.type"
                    :label="item.value"
                    :value="item.type">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否隐藏" prop="isHidden">
                <el-select v-model="appendlist.isHidden" clearable placeholder="是否隐藏">
                  <el-option
                    v-for="item in HiddenOptions"
                    :key="item.type"
                    :label="item.value"
                    :value="item.type">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="企业地址" prop="address">
                <el-input v-model="appendlist.address" placeholder="企业地址"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="邮政编码" prop="zipCode">
                <el-input v-model="appendlist.zipCode" placeholder="邮政编码"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="联系电话" prop="telephone">
                <el-input v-model="appendlist.telephone" placeholder="联系电话"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="电子邮件" prop="email">
                <el-input v-model="appendlist.email" placeholder="电子邮件"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="备注">
                <el-input type="textarea"  v-model="appendlist.remarks" placeholder="备注"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <!--<el-row :gutter="20" v-if="appendlist.category ==='1'">-->
            <!--<el-col :span="8">-->
              <!--<el-form-item label="子公司归口部门" prop="belongOrgId">-->
                <!--<el-input v-model="belongOrgName" placeholder="子公司归口部门" style="width:280px"></el-input>-->
              <!--</el-form-item>-->
            <!--</el-col>-->
            <!--<el-col :span="4" style="margin:40px">-->
                <!--<el-button size="small" type="primary" @click="handleCreate()">设置</el-button>-->
            <!--</el-col>-->
          <!--</el-row>-->
        </el-form>
      </div>
    </div>
    <!--归口部门设置-->
    <el-dialog
      v-if="dialogVisiblebelongOrg"
      append-to-body
      top="0"
      :close-on-click-modal="false"
      title="设置归口部门"
      :visible.sync="dialogVisiblebelongOrg"
      width="70%">
      <belongOrg  :belongData="belongData" @changeOrgCloseDialog="changeOrgCloseDialog" @setOrg="changeOrg($event)"></belongOrg>
    </el-dialog>
  </div>
</template>
<script>
  import {
    orgTreeSelect
  } from '@/api/service'
  import belongOrg from '@/views/systemManage/commonComponents/orgSetting/belongOrg'
  export default {
    components: {
      belongOrg
    },
    data() {
      return {
        classifyOptions: [],
        natureOptions: [],
        belongData: [],
        belongOrgName: '',
        unitIdOptions: [],
        dialogVisiblebelongOrg: false,
        typeOptions: [
          {
            type: '0',
            value: '活动'
          },
          {
            type: '1',
            value: '禁用'
          },
          {
            type: '2',
            value: '删除'
          }
        ],
        HiddenOptions: [
          {
            type: '0',
            value: '否'
          },
          {
            type: '1',
            value: '是'
          }
        ],
        isTempOptions: [
          {
            type: '0',
            value: '否'
          },
          {
            type: '1',
            value: '是'
          }
        ],
        corpUnitIdOptions: [
          {
            type: '1',
            value: '直属单位'
          },
          {
            type: '2',
            value: '下属单位'
          }
        ],
        deptUnitIdOptions: [
          {
            type: '1',
            value: '部门'
          },
          {
            type: '2',
            value: '机关部门'
          }
        ],
        appendlist: {},
        appendrules: {
          name: [
            { message: '机构名称不能为空', required: true, trigger: 'blur' },
            { min: 0, max: 128, message: '长度在 1 到 128 个字符', trigger: 'blur' }
          ],
          nameEn: [
            { required: false, trigger: 'blur' },
            { min: 0, max: 128, message: '长度在 1 到 128 个字符', trigger: 'blur' }
          ],
          shortName: [
            { required: false, trigger: 'blur' },
            { min: 1, max: 256, message: '长度在 1 到 256 个字符', trigger: 'blur' }
          ],
          anotherName: [
            { required: false, trigger: 'blur' },
            { min: 1, max: 256, message: '长度在 1 到 256 个字符', trigger: 'blur' }
          ],
          code: [
            { required: false, trigger: 'blur' },
            { min: 1, max: 128, message: '长度在 1 到 128 个字符', trigger: 'blur' }
          ],
          grade: [
            { message: '机构等级不能为空', required: false, trigger: 'change' },
            { min: 1, max: 32, message: '长度在 1 到 32 个字符', trigger: 'blur' }
          ],
          orderNo: [
            { message: '排序号不能为空', required: true, trigger: 'change' },
            { min: 1, max: 16, message: '长度在 1 到 16 个字符', trigger: 'blur' }
          ],
          category: [
            { message: '机构类别不能为空', required: true, trigger: 'change' },
            { min: 1, max: 4, message: '长度在 1 到 4 个字符', trigger: 'blur' }
          ],
          nature: [
            { required: false, trigger: 'blur' },
            { min: 0, max: 4, message: '长度在 1 到 4 个字符', trigger: 'blur' }
          ],
          status: [
            { message: '机构状态不能为空', required: true, trigger: 'blur' },
            { min: 0, max: 1, message: '长度在 1 个字符', trigger: 'blur' }
          ],
          zipCode: [
            { required: false, trigger: 'blur' },
            { min: 0, max: 16, message: '长度在 1 到 16 个字符', trigger: 'blur' }
          ],
          address: [
            { required: false, trigger: 'blur' },
            { min: 0, max: 256, message: '长度在 1 到 256 个字符', trigger: 'blur' }
          ],
          email: [
            { required: false, trigger: 'blur' },
            { min: 0, max: 128, message: '长度在 1 到 128 个字符', trigger: 'blur' }
          ],
          telephone: [
            { required: false, trigger: 'blur' },
            { min: 1, max: 16, message: '长度在 1 到 16 个字符', trigger: 'blur' }
          ],
          isTemp: [
            { message: '是否是临时不能为空', required: true, trigger: 'change' }
          ],
          isHidden: [
            { message: '是否隐藏不能为空', required: true, trigger: 'change' }
          ],
          remarks: [
            { required: false, trigger: 'change' },
            { min: 1, max: 256, message: '长度在 1 到 256 个字符', trigger: 'blur' }
          ],
          belongOrgId: [
            { required: false, trigger: 'blur' },
            { min: 1, max: 128, message: '长度在 1 到 128 个字符', trigger: 'blur' }
          ]
        },
        orgTree: {
          condition: [
            {
              property: 'id',
              value: '',
              type: 'EQ'
            }
          ]
        },
        id: this.$route.params.id
      }
    },
    created() {
      this.fetchData()
      this.GetCodeList()
      this.GetCodeList1()
    },
    watch: {
      // 如果路由有变化，会再次执行该方法
      '$route.name': ['GetCodeList', 'GetCodeList1', 'fetchData'],
      id(n, o) {
        console.log(n)
      }
    },
    methods: {
      fetchData() {
        this.orgTree.condition[0].value = this.$route.params.id
        this.$store.dispatch('OrgTreeSelect', this.orgTree).then(res => {
          this.appendlist = res.data.records[0]
          if (this.appendlist.belongOrgId !== ''&& this.appendlist.belongOrgId !== null) {
            orgTreeSelect({ condition: [
              {
                'property': 'id',
                'value': this.appendlist.belongOrgId,
                'type': 'EQ'
              }
            ] }).then(response => {
                this.belongOrgName = response.data.data.records[0].name
                this.belongData.belongOrgId = this.appendlist.belongOrgId
                this.belongData.belongOrgName = response.data.data.records[0].name
              })
          } else {
            this.belongOrgName = ''
          }
          if (this.appendlist.category === '1'){
            this.unitIdOptions = this.corpUnitIdOptions
          }
          if (this.appendlist.category === '2'){
            this.unitIdOptions = this.deptUnitIdOptions
          }
          // this.subsyslist.condition[0].value = res.data.records[0].subsysid
          // console.log(this.appendlist)
        }).catch((err) => {
          console.log(err)
        })
      },
      GetCodeList() {
        let args = {}
        args.codeType = 'ORG_CATEGORY_CODE'
        args.codeStatus = '0'

        this.$store.dispatch('SysCodeListByCodeType', args).then(res => {
          let data = res.data
          if (data && data.length > 0) {
            data.forEach((item, i) => {
              item.id = JSON.stringify({
                'id': item.codeKey,
                'name': item.codeName
              })
            })
          }
          this.classifyOptions = data
          this.loading = false
        }).catch((err) => {
          console.log(err)
        })
      },
      GetCodeList1() {
        let args = {}
        args.codeType = 'ORG_NATURE_CODE'
        args.codeStatus = '0'

        this.$store.dispatch('SysCodeListByCodeType', args).then(res => {
          let data = res.data
          if (data && data.length > 0) {
            data.forEach((item, i) => {
              item.id = JSON.stringify({
                'id': item.codeKey,
                'name': item.codeName
              })
            })
          }
          this.natureOptions = data
          this.loading = false
        }).catch((err) => {
          console.log(err)
        })
      },
      updateData() {
        this.appendlist.id = this.$route.params.id
        this.$store.dispatch('OrgTreeUpdate', this.appendlist).then(res => {
          this.$emit('listfresh')
          this.$router.push({
            path: 'org/' + this.$route.params.id
          })
          this.$message({
            type: 'success',
            message: '编辑成功!'
          })
        }).catch((err) => {
          console.log(err)
        })
      },
      createSubmit(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.updateData()
          } else {
            this.$message({
              type: 'danger',
              message: '编辑失败!'
            })
            return false
          }
        })
      },
      cancelSubmit() {
        this.$router.push({
          path: 'org/' + this.$route.params.id
        })
      },
      handleCreate() {
        this.dialogVisiblebelongOrg = true
      },
      changeOrgCloseDialog() {
        this.dialogVisiblebelongOrg = false
      },
      changeOrg(data) {
        this.appendlist.belongOrgId = data.orgId
        this.belongOrgName = data.orgName
      },
      selectChanged(val) {
        // if (val === '2') {
        //   this.appendlist.belongOrgId = ''
        // }
        this.appendlist.unitId = ''
        if (val === '1'){
          this.unitIdOptions = this.corpUnitIdOptions
        }
        if (val === '2'){
          this.unitIdOptions = this.deptUnitIdOptions
        }
      }
    }
  }
</script>
<style scoped>
  .menu-navbar{
    padding:0 0 20px;
    text-align: right;
  }
  .container{
    padding: 20px;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }
</style>
